<template>
    <div id="mRent" ref="mRent">
        <div id="tabs">
            <a  class="TabsActive" :style="selected.area==='区域'? '':'color:#ff0a60'" @click="selectorShow=!selectorShow;showList=areaList">{{selected.area}}
                <span class="mui-icon mui-icon-arrowdown"></span></a>
            <a  class="TabsActive" :style="selected.price==='租金'? '':'color:#ff0a60'" @click="selectorShow=!selectorShow;showList=priceList">{{selected.price}}
                <span class="mui-icon mui-icon-arrowdown"></span></a>
            <a  class="TabsActive" :style="selected.roomType==='房型'? '':'color:#ff0a60'" @click="selectorShow=!selectorShow;showList=roomTypeList">{{selected.roomType}}
                <span class="mui-icon mui-icon-arrowdown"></span></a>
            <a  class="TabsActive" @click="selectMoreShow=!selectMoreShow">更多
                <span class="mui-icon mui-icon-arrowdown"></span></a>
        </div>

        <div id="selector" v-if="selectorShow"  @click="selectorShow=false">
            <p v-for="(item,index) in showList" :key="index" @click="tabSelect(item,index)">{{item}}</p>
        </div>
        <div id="selectMore" v-if="selectMoreShow"  @click="selectMoreShow=false">
            <div @click.stop>
                <p>面积</p>
                <p><span v-for="(item,index) in sizeList" :key="item" @click="areaChange(item,index)"> {{item}}</span></p>
            </div>
           <div>
               <p>排序方式</p>
               <p><span v-for="(item,index) in orderList" :key="item" @click="orderChange(item,index)"> {{item}}</span></p>
           </div>
        </div>
        <div id="houseShow" ref="houseShow">
            <div class="mui-card" v-for="house in houseMsg" :href="house.source">
                <a  :href="house.source">
                <img :src="house.directory" :alt="house.name">
                <div id="houseContainer">
                    <h4>{{house.name}}</h4>
                    <p>{{house.house_type}}|{{house.size}}㎡|{{house.toward}}</p>
                    <p>{{house.price}}元/月</p>
                    <p>{{house.location}}</p>
                </div>
                </a>
        </div>

            <div id="footer">
            <p>{{loadingState}}</p>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "mRent",
        props:['nowArea'],
        data(){
            return{
                api:this.Global.api,
                selectorShow:false,
                selectMoreShow:false,
                houseMsgReady:[],
                houseMsg:[],
                loadingState:'上拉加载...',
                jsonData:{nextpage:0,house_type :0,price:0 ,size:0,height:'',location:'',house_list:''},
                areaList:["不限","天河区","越秀区","海珠区","番禺区","花都区","白云区","黄埔区","萝岗区"],
                priceList:['不限','1000以下','1000-2000','2000-3000','3000-4000','4000以上'],
                roomTypeList:['不限','一室','二室','三室','四室及以上'],
                sizeList:['不限','50㎡以下','50㎡-70㎡','70㎡-90㎡','90㎡-120㎡','120㎡以上'],
                orderList:['默认','租金最高','租金最低','面积最大','面积最小','最新房源'],
                selected:{type:'区域', area:'区域', price:'租金', roomType:'房型', size:'面积', order:"排序"},
                showList:[],
            }
        },
        methods:{
            refreshMsg(data){
                this.$axios.get(this.api+ '/index.php/index/housedata',{params: data}).then(res =>{
                    if(res.status >= 200 && res.status<300){
                        this.houseMsgReady=res.data.data;
                        this.houseMsgReady.num = res.data.num;
                        this.houseMsg=this.houseMsgReady.slice(0,10);
                        this.loadingState='上拉加载...';
                        if(res.data.num ===0 ) this.loadingState='搜索无结果...';
                        else if(res.data.num <= 10 ) this.loadingState= '所有数据加载完成';
                    } else {
                        alert(res.status)
                    }
                })
            },
            onScroll(){
                if(this.$refs.houseShow.scrollTop+this.$refs.houseShow.clientHeight >=this.$refs.houseShow.scrollHeight-10 && this.loadingState==='上拉加载...'){
                    if(this.houseMsg.length >= this.houseMsgReady.num){
                        this.loadingState='所有数据加载完成';
                    } else{
                        if(this.houseMsg.length%500 === 0){
                        this.jsonData.nextpage++;
                        this.refreshMsg(this.jsonData);
                        }
                        this.loadingState='努力加载中...';
                        this.houseMsg=this.houseMsg.concat(this.houseMsgReady.slice(this.houseMsg.length-this.jsonData.nextpage*500,this.houseMsg.length-this.jsonData.nextpage*500+10));
                        this.loadingState='上拉加载...';
                    }
                }
            },
            tabSelect(item,index){
                switch(this.showList){
                    case this.areaList:
                        this.selected.area = item.slice(0,2);
                        this.jsonData.location = item==='不限'?'':item.slice(0,2);
                        break;
                    case this.priceList:
                        this.selected.price = item;
                        this.jsonData.price = item==='不限'? 0:index;
                        break;
                    case this.roomTypeList:
                        this.selected.roomType = item;
                        this.jsonData.house_type = item==='不限'? 0:index;
                        break;
                }
            },
            areaChange(item,index) {
                    this.selectMoreShow=false;
                this.jsonData.size = item==='不限'?'':index;
            },
            orderChange(item,index) {
                this.selectMoreShow=false;
                this.jsonData.house_list = index;
            },
            QQLoginCallBack(){
                let url = window.location.href;
                let Reg = /\?code=/i;
                if(Reg.test(url)){
                    let code = url.slice(url.search(Reg)+6,url.length);
                    if( document.cookie.indexOf('login_state=true')=== -1){
                        this.$axios.get(this.api+ '/index.php/index/qc_data',{params:{code: code}}).then(
                            res =>{
                                if(res.status>=200&&res.status<300){
                                    if(res.data.res===0){
                                        document.cookie = 'login_state=true';
                                        setTimeout(()=>{
                                            this.$emit('loginState');
                                        },500)
                                    }else{
                                        alert('通过qq登录失败');
                                        console.log(res);
                                    }
                                } else {
                                    console.log('登录失败',res.data);
                                }
                            }
                        )
                    }
                }

            }
        },
        mounted(){
            this.QQLoginCallBack();
            this.refreshMsg(this.jsonData);
            this.$refs.houseShow.addEventListener('scroll', this.onScroll);
        },
        watch:{
            jsonData:{
                deep:true,
                handler(){
                    this.refreshMsg(this.jsonData);
                }
            },
            nowArea() {
                this.selected.area = this.nowArea;
                this.jsonData.location = this.nowArea==='不限'? '':this.nowArea;
            }
        }
    }
</script>

<style scoped>
    #mRent{
        overflow: hidden;
    }
    #tabs{
        position: fixed;
        z-index: 1;
        top: 3rem;
        margin: 0;
        width: 100vw;
        height: 2rem;
        background-color: white;
    }
    #tabs a{
        display: inline-block;
        width: 25%;
        color: #595959;
        line-height: 2rem;
        text-align: center;
        border-bottom: 1px solid #e4e4e4;
    }
    #tabs a span{
        font-size: 0.9em;
    }
    #houseShow{
        position: absolute;
        z-index: -1;
        top: 2rem;
        height: 100%;
        width: 100vw;
        overflow: auto;
    }
    #houseShow .mui-card{
        margin: 0.4rem;
      }
    #houseShow a{
           display: block;
           padding: 0;
           margin:0;
           color: #595959;
       }
    #houseShow img{
        display: block;
        float: left;
        width: 7rem;
        height: 7rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    #houseContainer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0.5rem 0 0 0.5rem;
    }
    #houseContainer h4{
        font-size: 1.2em;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #houseContainer p:nth-child(3){
        color: #ff0a60;
        font-size: 1.7em;
    }
    #houseContainer p{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #footer{
        height: 3rem;
        width: 100vw;
    }
    #footer p{
        width: 100%;
        text-align: center;
        line-height: 3rem;
    }
    #selector{
        position: fixed;
        top: 5rem;
        width: 100vw;
        height: 100%;
        background-color: rgba(0,0,0,0.1);
        margin: 0;
    }
    #selector p {
        margin: 0;
        height: 3rem;
        width: 100%;
        background-color: white;
        border-bottom: 1px solid #e4e4e4;
        text-indent: 2em;
        line-height: 3rem;
    }
    #selectMore{
        position: fixed;
        top: 5rem;
        width: 100vw;
        height: 100%;
        background-color: rgba(0,0,0,0.1);
        margin: 0;
    }
    #selectMore div{
        margin: 0;
        width: 100%;
        background-color: white;
        border-bottom: 1px solid #e4e4e4;
    }
    #selectMore div p{
        margin: 0;
        padding: 0.2rem 0.5rem;
    }
    #selectMore div p:nth-child(1){
        padding-left: 1rem ;
        padding-bottom: 0;
    }
    #selectMore div p:nth-child(2){
        padding-top: 0;
    }
    #selectMore div p span{
        display: inline-block;
        background-color: whitesmoke;
        padding: 0.3rem 0.5rem;
        margin: 0.5rem;
        border-radius: 0.2rem;
        font-size: 0.9em;
        color: #000000;
    }
</style>